<template>
  <div style="height: 100%">
    <div style="height: 10%">
      <item1 :item="obj[0]"></item1>
    </div>
    <recycle-scroller class="virtual-list list" :buffer="200" :prerender="10" :item-size="39" key-field="id" :items="list" style="height: 88%" @scroll-end="scrollEnd">
      <template v-slot="{ item, index }">
        <div class="listItem" :key="index" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
          <item :item="item" :index="index+1"></item>
        </div>
      </template>
    </recycle-scroller>
    <!--<pop ref="pop" @confirm="getShowDetail"></pop>-->
  </div>
</template>

<script>
import item from './item/index.vue'
import item1 from './item/index1.vue'
import pop from '../pop/pop2'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {getPersonKPI, itemGetAll} from '@/api/home.js'
import { resolve } from 'vue-carousel-3d'
export default {
  name: 'item7Title',
  props: { objParent: { type: [Object, Array] } },
  data() {
    return {
      list: [],
      page: 1,//分页
      runHeight: null,
      timer: null,//定时器
      obj:[]
    }
  },
  components: { item, vueSeamlessScroll, pop, item1 },
  // 无缝滚动
  /* computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }Metrics
  }, */

  methods: {
    scrollEnd(){
      /* setTimeout(()=>{
        const container = document.querySelector('.virtual-list');
        container.scrollTop = 0;
      },12000) */
    },
    clickItem(item) {
      console.log(item)
      this.$refs.pop.getShow(item)
    },
    getShowDetail() {
      console.log(111)
    },
    async getTableDataList() {
      await getPersonKPI().then(res => {
        if (res.code == 200) {
          this.list = res.data.filter(item=>{
            return item.name !== '公司整体'
          })
          this.list.forEach((item, index) => {
            item.id = index
          })
          this.obj = res.data.filter(item=>{
            return item.name === '公司整体'
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 启动自动滚动
    startAutoScroll() {
      const container = document.querySelector('.virtual-list');
      this.scrollInterval = setInterval(() => {
        container.scrollTop += 1;
      }, 50); // 每50ms滚动一次
    },
    // 停止自动滚动
    stopAutoScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    },
    //鼠标移出
    resumeScroll(){
      this.startAutoScroll()
    },
    //鼠标移入
    pauseScroll(){
      this.stopAutoScroll()
    }
  },
  mounted() {
    this.getTableDataList()
    this.startAutoScroll()
  },
  beforeDestroy() {
    this.stopAutoScroll()
  }
}
</script>

<style lang="scss" scoped>
.list {
  width: calc(100% - 0px);
  position: relative;
  height: calc(100% - 10px);
  overflow: hidden;

  .listItem {
    width: calc(100% - 40px);
    margin-left: 20px;
    height: 49px;
    margin-bottom: 6px;
    //cursor:pointer;
  }
}

// 滚动条宽度
.list::-webkit-scrollbar {
  width: 0;
}

// 滚动条轨道
.list::-webkit-scrollbar-track {
  background-color: rgba(2, 6, 23, 0.5);
}

// 小滑块
.list::-webkit-scrollbar-thumb {
  background: #56B5FF;
  border-radius: 3px;
}
</style>
